<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
  <head>
    <title>Canvas Art gallery</title>
    <meta name="DC.creator" content="Kamiel Martinet, http://www.martinet.nl/">
    <meta name="DC.publisher" content="Mozilla Developer Center, http://developer.mozilla.org">
    <style type="text/css">
      body { background: 0 -100px repeat-x url(images/bg_gallery.png) #4F191A; margin:10px; }
      img { display:none; }
      table { margin: 0 auto; }
      td { padding:15px; }
    </style>
    <script type="text/xaml" id="xaml"><?xml version="1.0"?>
      <Canvas xmlns="http://schemas.microsoft.com/client/2007"></Canvas></script>
<script type="text/javascript" src="../uupaa-excanvas.js"></script>

    <script>
    function boot() {
      draw();
    }
    function draw() {
      // Loop through all images
      for (var i=0;i<document.images.length;i++){
    
        // Don't add a canvas for the frame image
        if (document.images[i].getAttribute('id')!='frame'){
    
          // Create canvas element
          var canvas = uuCanvas.init(document.createElement('canvas'));
          canvas.setAttribute('width',132);
          canvas.setAttribute('height',150);
    
          // Insert before the image
          document.images[i].parentNode.insertBefore(canvas, document.images[i]);

          (function(_canvas, _i) {
            var keepCanvas = _canvas, keepI = _i;
            uuCanvas.ready(function() {
        
              var ctx = keepCanvas.getContext('2d');

                ctx.translate(-10, 5);
                ctx.scale(1.2, 0.8);
                ctx.rotate(5 * Math.PI / 180);
        
              // Draw image to canvas
              ctx.drawImage(document.images[keepI],15,20);
        
              // Add frame
              ctx.drawImage(document.getElementById('frame'),0,0);
            });
          })(canvas, i);
        }
      }
    }
    window.onload = function() {
      uuCanvas.ready(boot);
    };
    </script>

  </head>
  <body>
    <table>
      <tr>
        <td><img src="images/gallery_1.jpg"></td>
        <td><img src="images/gallery_2.jpg"></td>
        <td><img src="images/gallery_3.jpg"></td>
        <td><img src="images/gallery_4.jpg"></td>
      </tr>
      <tr>
        <td><img src="images/gallery_5.jpg"></td>
        <td><img src="images/gallery_6.jpg"></td>
        <td><img src="images/gallery_7.jpg"></td>
        <td><img src="images/gallery_8.jpg"></td>
      </tr>
    </table>
    <img src="images/picture_frame.png" width="132" height="150" id="frame">
  </body>
</html>
